<template>
  <div class="app-container" style="background: #f3f4f6;flex: 1;padding: 24px;box-sizing: border-box;overflow: auto;">
    <div class="training_info_wrap">
      <div class="training_info_wrap_title">新增培训课程</div>
      <div class="training_info_form">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px" label-position="left">
          <el-row>
            <el-col :span="12">
              <el-form-item label="培训模块" prop="moduleTitle" style="margin-right: 20px;">
                <el-input v-model="form.moduleTitle" placeholder="请输入培训模块" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训专家" prop="trainingExpert"  style="margin-left: 20px;">
                <el-input v-model="form.trainingExpert" placeholder="请输入培训专家" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="培训主题" prop="trainingTheme" style="margin-right: 20px;">
                <el-input v-model="form.trainingTheme" placeholder="请输入培训主题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训形式" prop="trainingFormat" style="margin-left: 20px;">
                <el-select v-model="form.trainingFormat" placeholder="请选择培训形式">
                  <el-option
                    v-for="dict in dict.type.training_format"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="单位" prop="teacherNo"  style="margin-left: 20px;">-->
            <!--                <el-input v-model="form.teacherNo" placeholder="请输入教师工号" />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位" prop="unit" style="margin-right: 20px;">
                <el-input v-model="form.unit" placeholder="请输入单位" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称/职务" prop="title" style="margin-left: 20px;">
                <el-input v-model="form.title" placeholder="请输入职称/职务" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地点" prop="trainingAddress" style="margin-right: 20px;">
                <el-input v-model="form.trainingAddress" placeholder="请输入地点" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训学时" prop="classHour"  style="margin-left: 20px;">
                <el-input v-model="form.classHour" placeholder="请输入培训学时" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始日期" prop="startTime">
                <el-date-picker clearable
                                v-model="form.startTime"
                                type="date"
                                style="width: 97.5%"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时间段" prop="endTime" style="margin-left: 20px;">
                <el-select v-model="form.endTime" placeholder="请选结束时间段">
                  <el-option
                    v-for="(it, index) in timeType"
                    :key="index"
                    :label="it.label"
                    :value="it.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="培训课程简述" prop="trainingCourseNotes">
            <el-input v-model="form.trainingCourseNotes" type="textarea" rows="5" placeholder="请输入简述" />
          </el-form-item>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="课后作业" name="first">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="是否设置课后作业" prop="">
                    <el-radio-group v-model="form.isWork">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.isWork ==1">
                <el-col :span="24">
                  <el-form-item label="作业标题" prop="workTitle">
                    <el-input v-model="form.workTitle"  placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.isWork ==1">
                <el-col :span="24">
                  <el-form-item label="作业要求" prop="workRequire">
                    <el-input v-model="form.workRequire" type="textarea" rows="5" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.isWork ==1">
                <el-col :span="24">
                  <el-form-item label="截止时间" prop="workEndTime">
                    <el-date-picker clearable
                                    v-model="form.workEndTime"
                                    type="date"
                                    style="width: 100%"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择截止日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="问卷调查" name="second">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="是否设置问卷调查" prop="">
                    <el-radio-group v-model="form.isQuestionnaire">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="surveyQuestions">
                <div class="surveyQuestions-title" v-if="form.isQuestionnaire == 1">
                  <div class="surveyQuestions-title-left">问卷问题</div>
                  <div>
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="addQuestion"
                      v-hasPermi="['classai:training:add']"
                      style="padding: 6px 16px;box-sizing: border-box"
                    >添加问题</el-button>
                  </div>
                </div>
                <div class="surveyQuestions-content" v-if="form.isQuestionnaire == 1">
                  <div class="surveyQuestions-content-li" v-for="(it,index) in form.trainingCourseQuestionnaireList" :key="index">
                    <div class="surveyQuestions-content-li-title">
                      <div>问题{{ index+1 }}</div>
                      <div>
                        <img src="@/assets/images/teacher_del.png" style="width:14px;height:16px;" @click="deleteQuestion(index)" alt="">
                      </div>
                    </div>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="问题内容" prop="questionnaireTitle" >
                          <el-input v-model="it.questionnaireTitle"  type="textarea" rows="3 " placeholder="请输入问题内容" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="问题类型" prop="questionnaireType" >
                          <el-select v-model="it.questionnaireType" placeholder="请选择问题类型">
                            <el-option
                              v-for="dict in questionnaireTypeLi"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程视频" name="third">
              <div class="file-main">
                <el-form-item label="课程视频" prop="">
                  <file-upload v-model="courseVideoLi" @deleteLi="deletVideoFile"  :fileSize ='100' :fileType="['mp4','mov','webm','avi','mkv','ogv']" />
                </el-form-item>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程资料" name="fourth">
              <div class="file-main">
                <el-form-item label="课程资料" prop="">
                  <!--                  @input="handleUpload"-->
                  <file-upload v-model="courseFileLi" @deleteLi="deletCourseFile"  :fileSize ='100' :fileType="['txt','doc','docx','pdf','xls','xlsx']" />
                </el-form-item>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <div class="teacher_info_btn" style="display: flex;justify-content: flex-end">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addTeacher } from "@/api/classai/teacher";
import {
  addTraining,
  addTrainingCourse, deleteVideo, delTrainingTeacher, editTrainingCourse,
  getTraining,
  getTrainingCourseInfo,
  getTrainingInfo,
  updateTraining
} from "@/api/classai/training";

export default {
  name: "AddCourse",
  dicts: ['classai_common_status', 'teacher_sex', 'teacher_title','px_type','training_format'],
  data() {
    return {
      dateContrl:false,
      courseVideoLi:[],
      courseFileLi:[],
      timeType:[
        {
          label:'上午',
          value:'上午'
        },
        {
          label:'下午',
          value:'下午'
        },
        {
          label:'晚上',
          value:'晚上'
        },
      ],
      activeName: 'first',
      // 表单参数
      form: {
        isWork:null,
        isQuestionnaire:null,
        trainingCourseQuestionnaireList:[
          {
            questionnaireType:'',
            questionnaireTitle:''
          }
        ]
      },
      questionnaireTypeLi:[
        {
          value:0,
          label:'评分'
        },
        {
          value:1,
          label:'文本'
        },
      ],
      // 表单校验
      rules: {
        workTitle: [
          { required: true, message: "作业标题不能为空", trigger: "blur" }
        ],
        workRequire: [
          { required: true, message: "作业要求不能为空", trigger: "blur" }
        ],
        trainingTheme: [
          { required: true, message: "培训主题不能为空", trigger: "blur" }
        ],
        // moduleTitle: [
        //   { required: true, message: "请选择培训模块", trigger: "change" }
        // ],
        trainingFormat: [
          { required: true, message: "请选择培训形式", trigger: "change" }
        ],
        startTime: [
          { required: true, message: "请选择开始日期", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "请选择时间段", trigger: "change" }
        ],
        // classHour: [
        //   { required: true, message: "培训学时不能为空", trigger: "blur" }
        // ],
      }
    };
  },
  created(){
    this.getList()
  },
  methods: {
    deletVideoFile(e){
      const id = this.courseVideoLi[e.delIndex].id
      if (!id) return
      this.deleteSource(id, 'video', e.delIndex)
    },
    deletCourseFile(e){
      const id = this.courseFileLi[e.delIndex].id
      if (!id) return
      this.deleteSource(id, 'course', e.delIndex)
    },
    deleteSource(id, type, index) {
      deleteVideo(id).then(response=>{
        if(response.code !== 200) return this.$message.error('删除失败')
        if (type === 'video') {
          return this.courseVideoLi.splice(index, 1)
        }
        this.courseFileLi.splice(index, 1)
      })
    },
   canEdit(dateStr) {
      const today = new Date()
      today.setHours(0, 0, 0, 0) // 当天 00:00:00

      const targetDate = new Date(dateStr)
      targetDate.setHours(0, 0, 0, 0)

      return today < targetDate
    },
getList(){
      let id = this.$route.query.id
      getTrainingCourseInfo(id).then(response => {
        this.form = response.data;
        console.log(this.form.trainingCourseFileList, "this.form.trainingCourseFileList")
        this.form.trainingFormat = String(this.form.trainingFormat)
        this.form.trainingCourseFileList.forEach(item=>{
          if(item.type ===1) this.courseFileLi.push(
            {
              name:item.courseResourceName,
              url:item.courseResourceUrl,
              id:item.id
            }
          )
          if(item.type ===0)  this.courseVideoLi.push(
            {
              name:item.courseResourceName,
              url:item.courseResourceUrl,
              id:item.id
            }
          )
        })
      });
    },
    deleteQuestion(index){
      this.form.question.splice(index, 1)
    },
    addQuestion(){
      this.form.trainingCourseQuestionnaireList.push(
        {
          questionnaireTitle:'',
          questionnaireType:''
        }
      )
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$router.push({
        path: '/pxmanage/trainingDetail',
        query: { from: '1',id:this.$route.query.ids }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        moduleTitle: null,
        trainingTheme: null,
        trainingFormat: null,
        trainingExpert: null,
        classHour: null,
        startTime: null,
        endTime: null,
        trainingAddress: null,
        trainingCourseNotes: null,
        isWork: null,
        workTitle: null,
        workRequire: null,
        workEndTime: null,
        isQuestionnaire: null,
        trainingId: null,
        unit: null,
        title: null,
        trainingCourseFileList: [],
        trainingCourseQuestionnaireList: [],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */

    submitForm() {
      const dateTypes = this.canEdit(this.form.startTime)
      // if(!dateTypes) return  this.$message.error("当前时间大于等于上线时间，无法修改")
      if(this.form.isWork ==0){
        this.form.workTitle = ''
        this.form.workRequire = ''
        this.form.workEndTime = ''
      }
      if(this.form.isQuestionnaire == 0) this.form.trainingCourseQuestionnaireList = []
      this.form.trainingId = this.$route.query.traingId
      let FileLi = []
      this.courseFileLi.map(item =>{
        FileLi.push(
          {
            type:1,
            courseResourceName:item.name,
            courseResourceUrl:item.url
          }
        )
      })
      let VideoLi = []
      this.courseVideoLi.map(item =>{
        VideoLi.push(
          {
            type:0,
            courseResourceName:item.name,
            courseResourceUrl:item.url
          }
        )
      })
      this.form.trainingCourseFileList = [...FileLi,...VideoLi]
      this.$confirm('请确保所有内容已完成填写，提交后将返回课程列表页面！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // this.form.teacherPassword = '123456'
            editTrainingCourse(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
            });
          }
        });
      }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.training_info_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 33px;
  .training_info_wrap_title{
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 16px;
  }
  .training_info_form {
    height: calc(100% - 60px);
    overflow-y: auto;
    ::v-deep {
      .el-form-item {
        display: flex;
        flex-direction: column;
      }
      .el-form-item__content {
        margin-left: 0!important;
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .training_info_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
  }
}

.surveyQuestions{
  .surveyQuestions-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom:16px;
    .surveyQuestions-title-left{
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #374151;
    }
  }
  .surveyQuestions-content{
    padding: 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    .surveyQuestions-content-li{
      margin-bottom: 16px;
      .surveyQuestions-content-li-title{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }
    }
  }
}
.file-main{
  padding: 25px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  margin-bottom: 24px;
}
</style>
